<template>
	<view>
		<view class="uni-status"></view>
		<view class="navbar" :style="{ background: bgc,color:color }" >
			<view class="whiteImg" v-if="wbtn"  @click="returnBtn"><image src="../static/image/index/back@3x.png" mode=""></image></view>
			<view class="blackImg" v-if="bbtn" @click="returnBtn"><image src='../static/image/search/icon_jinru2@3x.png' mode=""></image></view>
			<slot class="text"></slot>
		</view>
	</view>
</template>
<script>
export default {
	props: ['bgc', 'wbtn',"bbtn",'color'],
	data() {
		return {};
	},
	methods: {
		//返回按钮
		returnBtn:function(){
			uni.navigateBack({
				delta:1
			})
		}
	}
};
</script>

<style lang="scss">
	* {
		padding: 0;
		margin: 0;
		font-size: 0.75rem;
		box-sizing: border-box;
	}
.uni-status {
	width: 100%;
	height: var(--status-bar-height);
}
.navbar {
	height: 80rpx;
	color: #ffffff;
	font-size: 36rpx;
	padding: 20rpx 0 20rpx 20rpx;
	display: flex;
	z-index: 9999 !important;
	align-items: center;
	position: fixed;
	top: var(--window-top);
	left: 0;
	right: 0;
	// border: 1px red solid;
	.whiteImg,.blackImg {
		width: 30rpx;
		height: 30rpx;
		margin: 0 20rpx;
		image {
			width: 100%;
			height: 100%;
		}
	}
}
// .activeColor{
// 	height: 80rpx;
// 	color: #000000;
// 	font-size: 36rpx;
// 	padding: 20rpx 0 20rpx 40rpx;
// 	display: flex;
// 	z-index: 9999 !important;
// 	align-items: center;
// 	position: fixed;
// 	top: var(--window-top);
// 	left: 0;
// 	right: 0;
// 	.wbtn,.bbtn {
// 		width: 30rpx;
// 		height: 40rpx;
// 		margin: 0 5rpx;
// 		image {
// 			width: 100%;
// 			height: 100%;
// 		}
// 	}
// }
</style>
